<template>
  <titleCompt title="分月份税收收入累计增幅">
    <div class="tscxbox">
      <div class="tscxbox-left">
        <echartCompt class="tscxbox-left-chart" v-model="chartOption" />
      </div>
    </div>
  </titleCompt>
</template>

<script>
import titleCompt from "@/views/金四决策指挥平台/components/titleCompt";
export default {
  components: {
    titleCompt,
  },
  data() {
    return {
      hsList1: [15, 85, 105, 45, 55, 65, 75, 25, 95, 35, 115, 125],
      hsList2: [5, 10, 15, 90, 25, 30, 70, 80, 20, 100, 110, 120],
      tjndList: ["2020", "2021"],
      tjyfList: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    };
  },
  computed: {
    chartOption() {
      let option = {
        grid: {
          left: this.getSize(50),
          right: this.getSize(10),
          top: this.getSize(30),
          bottom: this.getSize(30),
        },
        legend: {
          top: this.getSize(10),
          //orient: "vertical",
          x: "right",
          data: this.tjndList.sort((a, b) => {
            return b - a;
          }),
          textStyle: {
            fontSize: this.getSize(22),
            color: "#ffffff",
          },
        },
        xAxis: [
          {
            nameRotate: 15,
            type: "category",
            boundaryGap: ["20%", "10%"],
            data: this.tjyfList,
            axisLabel: {
              interval: this.isPad ? 1 : "",
              textStyle: {
                fontSize: this.getSize(22),
                color: "#ffffff",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
                width: 1,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            //max: 1200,
            nameTextStyle: {
              fontSize: this.getSize(14),
              color: "rgb(119,132,145)",
            },
            axisLabel: {
              textStyle: {
                fontSize: this.getSize(22),
                color: "#ffffff",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(119,132,145,0.5)",
                width: 0.5,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(119,132,145,0.5)"],
                width: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        tooltip: {
          trigger: "axis", // item
          show: true,
          // formatter: "{a}年:{c}千户",
          textStyle: {
            fontSize: this.getSize(14),
          },
        },
        series: [
          {
            name: this.tjndList[0],
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: this.getSize(10),
            data: this.hsList2,
            itemStyle: {
              color: "rgb(10,115,255)",
            },
            lineStyle: {
              normal: {
                color: "rgb(10,115,255)", // 线条颜色
              },
            },
            label: {
              show: false,
              // show: !this.isPad,
              position: "top",
              color: "#ffffff",
            },
          },
          {
            name: this.tjndList[1],
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: this.getSize(10),
            itemStyle: {
              color: "rgb(10,115,115)",
            },
            lineStyle: {
              normal: {
                color: "rgb(10,115,115)", // 线条颜色
              },
            },
            label: {
              show: false,
              // show: !this.isPad,
              position: "top",
              color: "#ffffff",
            },
            data: this.hsList1,
          },
        ],
        animationEasing: "bounceOut", //初始动画的缓动效果
        animationDelayUpdate: function (idx) {
          //数据更新动画的时长。
          return idx * 100;
        },
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.tscxbox {
  height: 100%;
  width: 100%;
  display: flex;
  &-left {
    flex: 2;
    &-chart {
      height: 100%;
      width: 95%;
    }
  }
}
</style>
